<!-- <!DOCTYPE html>
<html>
<head>
<title>欢迎光临 吴老二博客！</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="list"> 学习 </div>
<div id='dict'></div>
<script type="text/javascript">
    //列表
    var List = {{List|safe }};
  
    //下面的代码把List的每一部分放到头部和尾部
    $('#list').prepend(List[0]);
    $('#list').append(List[1]);
  
    console.log('--- 遍历 List 方法 1 ---')
    for(i in List){
        console.log(i);// i为索引
    }
  
    console.log('--- 遍历 List 方法 2 ---')
    for (var i = List.length - 1; i >= 0; i--) {
        // 鼠标右键，审核元素，选择 console 可以看到输入的值。
        console.log(List[i]);
    };
  
    console.log('--- 同时遍历索引和内容，使用 jQuery.each() 方法 ---')
    $.each(List, function(index, item){
        console.log(index);
        console.log(item);
    });
  
  
    // 字典
    var Dict = {{ Dict|safe }};
    console.log("--- 两种字典的取值方式  ---")
    console.log(Dict['site']);
    console.log(Dict.author);
      
    console.log("---  遍历字典  ---");
    for(i in Dict) {
        console.log(i + Dict[i]);//注意，此处 i 为键值
    }
</script>
</body>
</html> -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个数据驾驶舱</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
    <style>
        body{
            background-color: rgba(35, 7, 160, 0.61);
        }
       
        .heard{
            width: 1024px;
            margin:0 auto;
            text-align: center;
            border:red 1px solid;
            font-size: 20px;
            color: white;
        }
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
              width:700px;
              height:600px;
              margin: 15px auto;
              border:1px solid red;
          }
        /*默认长宽比0.75*/
        button{
            font-size: 45px;
            cursor:pointer;
            background-color: red;
            border: none;
            border-radius:30%;
            position: fixed;
            bottom: 5%;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="heard">数据驾驶舱</div>
    <div style="width: 100%;height: 100%;position: absolute;">
        <div id="l_b_hun" style="width: 400px;float: left;margin-top: 15px; position: absolute;height: 300px;border: black 2px solid;">
            
        </div>
        <div id="l_tu" style="width: 400px;float: left;margin-top: 325px;position: absolute;height: 300px;border: black 2px solid;">
            
        </div>
        <div id="leida_1" style="width: 400px;float: left;margin-top: 15px; position: absolute;height: 300px;right: 0px;border: black 2px solid;">
            
        </div>
        <div id="leida_2" style="width: 400px;float: left;margin-top: 325px;position: absolute;height: 300px;right: 0px;border: black 2px solid;">
            
        </div>
        <div id="main">
 
        </div>
        <div id="zuo_zhu"  style="width: 400px;float: left;margin-top: 5px; position: absolute;height: 300px;">
            
        </div>
        <div id="bintu" style="width: 400px;float: left;margin-top: 5px; position: absolute;height: 300px;right: 0px;">
            
        </div>
        <div id="wb" style="width:700px;height:300px;margin: 15px auto;border:1px solid red;">
 
        </div>
        <button onclick="int=window.clearInterval(int)" >停止更新</button>
    </div>
    


    <script type="text/javascript">
        function main(){
            function randomValue() {
                return Math.round(Math.random()*1000);
            }
            var dataList = {{dataList|safe }}
            console.log(dataList)
        var dd=[['score', 'product', 'amount']];
            for(var i=0,m=9;i<m;i++){
                function randomValue1() {
                    return Math.round(Math.random()*100);
                }
                var dd_x = [];
                dd_x.push(randomValue1());
                for(var key in dataList[i]){
                    // console.log(dataList[i][key]);
                    // console.log('"***"*10');
                    dd_x.push(dataList[i][key])
                    // for(var t in key){
                    //     console.log("key: " + t + " ,value: " + key["name"]);
                    // }
                
            }
            // console.log(dd_x);
            dd.push(dd_x)
        }

        function ditu(){

            var myChart = echarts.init(document.getElementById('main'));
            option = {
                tooltip: {
                        formatter:function(params,ticket, callback){
                            return params.seriesName+'<br />'+params.name+'：'+params.value
                        }//数据格式化
                    },
            visualMap: {
                min: 0,
                max: 1500,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],//取值范围的文字
                inRange: {
                    color: ['#e0ffff', '#006edd']//取值范围的颜色
                },
                show:true//图注
            },
            geo: {
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '信息量',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            alert(params.name+"信息量:"+params.value);
        });
        setTimeout(function () {
            myChart.setOption({
                series : [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data:dataList
                    }
                ]
            });
        },1000);
        }
        
        function bintu(){
                var myChart = echarts.init(document.getElementById('bintu'));
                option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['南海诸岛', '北京', '天津', '上海', '重庆','河北']
                },
                series: [
                    {
                        name: '信息量',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: dataList.slice(0, 6)
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function wb(){
            var myChart = echarts.init(document.getElementById('wb'));
            option = {
            dataset: {
                source: dd
            },
            grid: {containLabel: true},
            xAxis: {name: '信息量'},
            yAxis: {type: 'category'},
            visualMap: {
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['高', '低'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#D7DA8B', '#E15457']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        }
        
        function zuo_zhu(){
                var myChart = echarts.init(document.getElementById('zuo_zhu'));
                name_dd =[];
                xinxi_dd =[];
                renshu_dd =[];
                for(var i=1,m=dd.length;i<m;i++){
                    // console.log(dd[i][1]);
                    name_dd.push(dd[i][1]);
                    xinxi_dd.push(dd[i][2]);
                    renshu_dd.push(dd[i][0]);
                }
                option = {
                title: {
                    text: '部分信息量和人数',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left:'40%',
                    data: ['信息量', '人数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: true},
                        // magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: name_dd,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '信息量',
                        type: 'bar',
                        data: xinxi_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '人数',
                        type: 'bar',
                        data: renshu_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function l_b_hun(){
            var myChart = echarts.init(document.getElementById('l_b_hun'));
                name_dd =[];
                xinxi_dd =[];
                renshu_dd =[];
                for(var i=1,m=dd.length;i<m;i++){
                    // console.log(dd[i][1]);
                    name_dd.push(dd[i][1]);
                    xinxi_dd.push(dd[i][2]);
                    renshu_dd.push(dd[i][0]);
                }
                option = {
                title: {
                    text: '部分信息量和人数',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left:'40%',
                    data: ['信息量', '人数'],
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: true},
                        // magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: name_dd,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '信息量',
                        type: 'bar',
                        data: xinxi_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '人数',
                        type: 'line',
                        data: renshu_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function l_tu(){
            var myChart = echarts.init(document.getElementById('l_tu'));
                name_dd =[];
                xinxi_dd =[];
                renshu_dd =[];
                for(var i=1,m=dd.length;i<m;i++){
                    // console.log(dd[i][1]);
                    name_dd.push(dd[i][1]);
                    xinxi_dd.push(dd[i][2]);
                    renshu_dd.push(dd[i][0]);
                }
                option = {
                title: {
                    text: '部分信息量和人数',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left:'40%',
                    data: ['信息量', '人数'],
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: true},
                        // magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: name_dd,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '信息量',
                        type: 'line',
                        data: xinxi_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '人数',
                        type: 'line',
                        data: renshu_dd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function leida_1(){
            var myChart = echarts.init(document.getElementById('leida_1'));
                name_dd =[];
                xinxi_dd =[];
                renshu_dd =[];
                for(var i=1,m=dd.length;i<m;i++){
                    // console.log(dd[i][1]);
                    name_dd.push(dd[i][1]);
                    xinxi_dd.push(dd[i][2]);
                    renshu_dd.push(dd[i][0]);
                }
                option = {
                    
                    textAlign:'auto',
                title: {
                    // text: '自定义雷达图'
                },
                legend: {
                    data: ['人数'],
                    x:'auto',
                    padding:[10,10,10,10]
                },
                radar: [
                    {
                        indicator: [
                            { text: name_dd[0] },
                            { text: name_dd[1] },
                            { text: name_dd[2] },
                            { text: name_dd[3] },
                            { text: name_dd[4] },
                            { text: name_dd[5] },
                            { text: name_dd[6] },
                            { text: name_dd[7] },
                            { text: name_dd[8] }
                        ],
                        center: ['50%', '50%'],
                        radius: 120,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'circle',
                        name: {
                            formatter: '【{value}】',
                            textStyle: {
                                color: '#72ACD1'
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(114, 172, 209, 0.2)',
                                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                                shadowColor: 'rgba(0, 0, 0, 0.3)',
                                shadowBlur: 10
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        }
                    },
                ],
                series: [
                    {
                        name: '雷达图',
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 4
                            }
                        },
                        data: [
                            {
                                value: renshu_dd,
                                name: '人数',
                                symbol: 'rect',
                                symbolSize: 5,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            },
                        ]
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        function leida_2(){
            var myChart = echarts.init(document.getElementById('leida_2'));
            name_dd =[];
            xinxi_dd =[];
            renshu_dd =[];
            for(var i=1,m=dd.length;i<m;i++){
                // console.log(dd[i][1]);
                name_dd.push(dd[i][1]);
                xinxi_dd.push(dd[i][2]);
                renshu_dd.push(dd[i][0]);
            }
            option = {
                title: {
                    // text: '自定义雷达图'
                },
                legend: {
                    data: [ '信息量'],
                    x:'auto',
                    padding:[10,10,10,10]
                },
                radar: [
                    {
                     
                       
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        }
                    },
                    {
                        indicator: [
                            { text: name_dd[0], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[1], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[2], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[3], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[4], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[5], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[6], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[7], max:Math.max.apply(null,xinxi_dd)},
                            { text: name_dd[8], max:Math.max.apply(null,xinxi_dd)}
                        ],
                        center: ['50%', '50%'],
                        radius: 120
                    }
                ],
                series: [
                    {
                        name: '成绩单',
                        type: 'radar',
                        radarIndex: 1,
                        data: [
                           
                            {
                                value: xinxi_dd,
                                name: '信息量',
                                areaStyle: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                        {
                                            color: '#B8D3E4',
                                            offset: 0
                                        },
                                        {
                                            color: '#72ACD1',
                                            offset: 1
                                        }
                                    ])
                                }
                            }
                        ]
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        // ditu();
        setTimeout(ditu,500);
        // l_b_hun();
        setTimeout(l_b_hun,1000);
        // leida_1();
        setTimeout(leida_1,1500);
        // l_tu();
        setTimeout(l_tu,2000); 
        // leida_2();
        setTimeout(leida_2,2500);
        // zuo_zhu();
        setTimeout(zuo_zhu,3000);
        // wb();
        setTimeout(wb,3500);
        // bintu();
        setTimeout(bintu,4000);
        }
        main();
        var int = setInterval(main,7000);

        var ceshi = {{ceshi|safe }}
        console.log(ceshi)
    </script>
</body>
</html>